<template>
	<view class="container">
		<tui-tabs :tabs="categoryList" :unlined="false" itemWidth="50%" :currentTab="tabIndex" @change="change"
			:sliderBgColor="backgroundColorBar" :bold="true" selectedColor="#3e65b1" color="#000000"
			style="margin-top: 10rpx;">
		</tui-tabs>
		<view class="tui-product-container">
			<block v-for="(item, index) in roomList" :key="index">
				<!--商品列表-->
				<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover"
					:hover-start-time="150">
					<!--v-if="item.fileList != undefined && item.fileList !=''" -->
					<image :src="item.fileList[0].filePath" class="tui-pro-img" mode="widthFix" />
					<view class="tui-pro-content">
						<view class="tui-pro-tit" style="margin-bottom: 10rpx;font-size: 30rpx;">{{ item.statusName }}
						</view>
						<text class="tui-pro-pay" style="color: #444444;font-size: 30rpx;"></text>
						<view>
							<view class="tui-pro-price" style="margin-bottom: 10rpx;">
								<text class="tui-sale-price"
									style="color: #444444;margin-right: 10rpx;">添加时间：{{ item.addDate }} </text>
								<text class="tui-sale-price" style="color: #444444;font-size: 30rpx;">
									报修人：{{item.userName}}</text>
							</view>
							<view class="tui-pro-pay" style="color: #444444;font-size: 30rpx;">报修地址：{{item.repairPlace}}
							</view>
							<tui-button v-if="tabIndex ==0" width="750rpx" height="84rpx" @click="addRepair(item)">处理</tui-button>
							<!-- <tui-button width="750rpx" height="84rpx" @click="addRepair(item)">接单</tui-button> -->
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- <view class="bottom-btn align-center" style="border: 0;">
				<tui-button width="750rpx" height="84rpx"  @click="addRepair">立即报修</tui-button>
		</view> -->
		<tui-no-data style="margin-top: 200px;" v-if="roomList.length == 0"  :fixed="false" imgUrl="/static/images/img_nodata.png">暂无数据</tui-no-data>
	</view>
</template>

<script>
	var app = getApp()
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				title: '绑定账号',
				roomId: '',
				password: '',
				code: '',
				userInfo: {
					headImgUrl: '',
					nickname: ''
				},
				type: 0,
				isSend: false,
				disableGetMobileCode: false,
				disableSubmitMobileCode: true,
				getCodeButtonText: '获取验证码',
				isList: false,
				roomList: [],
				tabIndex: 0, // 当前tab的下标
				categoryList: [{
					name: '待办记录'
				}, {
					name: '历史记录'
				}],
			}
		},
		methods: {
			change(e) {
				let that = this;
				this.tabIndex = e.index
				this.active3 = e.index
				this.pages = 1;
				this.current = 0;
				this.roomList = [];
				console.log(e.index)
				if (e.index === 0) {
					this.repairList();
				} else {
					this.historyRepairList();
				}
			},
			/**
			 * 待处理订单
			 */
			repairList: function(e) {
				var that = this;
				var openId = '';
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					openId = userInfo.openId;
				}
				util.request('repair/unRepairDeviceList', {
					assignDept: userInfo.deptId,
					pageSize: 105,
					pageNum:1
				}).then(function(res) {
					if (res.code === 200) {
						that.roomList = res.rows;
						that.roomList.forEach(element => {
							element.addDate = util.formatDate(element.addDate, 'YYYY-MM-DD');
						});
					}
				});
			},
			/**
			 * @param {Object} e待处理订单
			 */
			historyRepairList: function(e) {
				var that = this;
				var openId = '';
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					openId = userInfo.openId;
				}
				util.request('repair/deviceList', {
					pageSize:100,
					pageNum:1
				}).then(function(res) {
					if (res.code === 200) {
						that.roomList = res.rows;
						that.roomList.forEach(element => {
							element.addDate = util.formatDate(element.addDate, 'YYYY-MM-DD');
						});
					}
				});
			},

			//
			addRepair: function(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/repair/sbRepairTake?id=' + item.id,
				})
			}
		},

		onLoad: function(options) {
			console.log("onLoad..............")
			//this.repairList();

		},
		onShow() {
			console.log("onShow..............")
			this.repairList();
		}
	}
</script>

<style lang="scss">
	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 25rpx;
		background: linear-gradient(to bottom, $color-default 0%, #fff 100%);
		padding-top: 100rpx;
	}

	.userinfo-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-bottom: 25rpx;
	}

	.userinfo-nickname {
		color: #272727;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	/* 绑定手机号的两个form */

	.login-title {
		margin: 20rpx 0 35rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.login {
		font-size: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login .first-line {
		height: 80rpx;
		border: 1rpx solid rgb(217, 217, 217);
		border-radius: 40rpx;
		width: 600rpx;
		margin-bottom: 20rpx;
	}

	.login .first-line input {
		padding-left: 20rpx;
		height: 80rpx;
		width: 100%;
	}

	.login .second-line {
		height: 80rpx;
		display: flex;
		width: 600rpx;
		margin-bottom: 50rpx;
	}

	.login .second-line input {
		height: 80rpx;
		width: 350rpx;
		margin-right: 20rpx;
		border: 1rpx solid rgb(217, 217, 217);
		padding-left: 20rpx;
		border-radius: 40rpx;
	}

	.login .second-line button {
		text-align: center;
		height: 84rpx;
		line-height: 84rpx;
		width: 250rpx;
		font-size: 30rpx;
		background-color: $color-default;
		color: #fff;
		border-radius: 40rpx;
	}

	.login .password-second-line {
		height: 80rpx;
		display: flex;
		width: 600rpx;
		margin-bottom: 50rpx;
	}

	.login .password-second-line input {
		height: 80rpx;
		width: 600rpx;
		border: 1rpx solid rgb(217, 217, 217);
		padding-left: 20rpx;
		border-radius: 5px;
	}

	.third-line {
		margin-left: auto;
		margin-right: auto;
		width: 600rpx;
	}

	.third-line button {
		height: 80rpx;
		font-size: 32rpx;
		background-color: $color-default;
		color: #fff;
	}

	.tui-flex-list {
		display: flex;
	}

	.bottom-btn {
		border: 1px solid #f4f4f4;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		background: #fff;
		padding-bottom: 20rpx;
	}

	.tui-btn-equals {
		display: block !important;
		font-size: 28rpx !important;
	}
</style>